<template>

  <div>
    <card-component :content-title="contentTitle">
      <div slot="action">
        <div class="action-wrapper">
          <el-form ref="form" :model="form" label-width="80px" inline>
            <el-form-item label="PCBA编号">
              <el-input v-model="form.pcbaCode" placeholder="请输入PCBA编号" autofocus clearable @change="handlePcbaCodeInput"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
          <el-form ref="form" :model="form" label-width="80px" inline>
            <el-form-item label="维修人员">
              <el-input v-model="form.repairer" placeholder="请输入维修人员名称" @change="handleRepairerInput"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div slot="table" v-if="id">
          <div class="checkInput-wrapper" >
            <div class="item-wrap" v-for="(item,index) in errorTypeList" >
              <el-tag type="danger">{{item}}</el-tag>
            </div>
          </div>

          <div class="btn-wrapper">
<!--            <el-button style="margin-right: 20px" @click="hanleClear">清空</el-button>-->
            <el-button type="primary" @click="handleSubmit">确认维修</el-button>
          </div>
        </div>
      </div>
    </card-component>

    <el-dialog>

    </el-dialog>
  </div>



</template>

<script>

  import card from '@/base/card.vue'
  import checkInput from '@/base/checkInput.vue'
  import request from '@/common/js/request'
  export default {
    components: {
      'card-component': card,
      checkInput,
    },
    data() {
      return {
        contentTitle:'维修确认',
        form:{
          pcbaCode:'',
          repairer:localStorage.getItem('repairer')||''
        },
        id:'',
        aoiResult:'',
      }
    },
    computed:{
      errorTypeList(){
        return this.aoiResult.split(',').filter(x=>{return !!x})
      }
    },
    created: function () {

    },
    watch: {

    },
    methods:{
      handlePcbaCodeInput(v){
        this.form.pcbaCode = v
        this.handleSearch()
      },
      handleRepairerInput(v){
        localStorage.setItem('repairer',v)
      },
      handleSearch(){
        if(!this.form.pcbaCode){
          this.$message.error('请输入PCBA编号')
          return
        }
        this.id = ''
        this.aoiResult = ''
        request.requestPcbaRecordList({
          pcbaCode:this.form.pcbaCode
        },res=>{
          if(res.data.code === 200){
            const data = res.data.data
            const list = data.pageInfo.list
            if(!list||list.length === 0){
              this.$message.error('未找到PCBA记录')
              return
            }
            this.id = list[0].id
            this.aoiResult = list[0].aoiResult
          }
        })
      },


      handleSubmit(){
        const aoiRepairResult = 'PASS'
        request.requestPcbaRecordRepair({
          id:this.id,
          aoiRepairResult,
          repairer:this.form.repairer,
          aoiRepairTime: new Date().getTime()
        },res=>{
          if(res.code === 200){
            this.$message.success('确认维修成功')
            this.form.pcbaCode = ''
            this.id = ''
            this.aoiResult = ''
          }

        })
      }
    },

  }
</script>


<style scoped>
  .action-wrapper{
    margin-top: 20px;
    padding-left: 20px;
  }

  .checkInput-wrapper{
    display: flex;
    flex-direction: row;
    padding-left: 40px;
    padding-top: 20px;
  }
  .btn-wrapper{
    display: flex;
    padding: 30px 0;
    width: 600px;
    justify-content: center;
  }

  .item-wrap{
    padding: 5px 0;
    display: flex;
    margin-right: 10px;
  }
  .item-wrap .inner-item{
    width: 320px;
  }
</style>


